<template>

	<view class="page">
		
			
		<uni-group title="推荐">
			<uni-row :gutter="30">
				<uni-col :span="8" v-for="(item,index) in hots" :key="index">
					<view class="book" @click="toContent(item.title,item.url)">
						<image :src="item.cover" class="cover"></image>
						<view class="title"> {{item.title}}</view>
					</view>
				</uni-col>
			</uni-row>
		</uni-group>
		

		<uni-card title="排行帮">

			<uni-list>
				<uni-list-item v-for="(book,index) in rank" :key="index" showArrow clickable
					@click="toContent(book.title,book.url)">
					<view class="book_item" slot="header">
						<view class="book_title">
							{{book.title}}<span>/{{book.autor}}</span>
						</view>
					</view>
				</uni-list-item>
			</uni-list>
		</uni-card>
		<uni-card title="最近更新">
			<uni-list>
				<uni-list-item v-for="(book,index) in lasts" :key="index" showArrow clickable
					@click="toContent(book.title,book.url)">
					<view class="book_item" slot="header">
						<view class="book_title">
							{{book.title}}<span>/{{book.autor}}</span>
						</view>
						<view class="book_desc">{{book.newTitle}}</view>
					</view>
				</uni-list-item>
			</uni-list>

		</uni-card>

	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				hots: [],
				lasts: [],
				rank: [],

				typeList: ["/xuanhuanxiaoshuo", "/xiuzhenxiaoshuo", "/dushixiaoshuo", "/chuanyuexiaoshuo",
					"/wangyouxiaoshuo", "/kehuanxiaoshuo"
				],

				url: "",
				title: "",
			}
		},
		onLoad(options) {

			this.title = options.title;
			this.url = options.url;

			uni.setNavigationBarTitle({
				title: this.title
			})
		
			
			this.getData();
		},
		onReady() {
			
	

		},
		
		methods: {

			

			getData() {
				
				uni.showLoading({
					title: '加载中...'
				})
				
			
				uniCloud.callFunction({
					name: 'router',
					data: {
						action: 'bookShop/getBookClassifyList',
						data: {
							url: this.url
						},
					}
				}).then(res => {

					uni.hideLoading();

					this.hots = res.result.hot;
					this.lasts = res.result.last;
					this.rank = res.result.rank;

				})

			},
			toContent(title, link) {
				uni.navigateTo({
					url: `/reading/pages/info/index?title=${title}&index=0&url=${encodeURIComponent(link)}`
				});
				
			},
			toType(index, type) {
				//分类
			},
			
		}

	}
</script>

<style lang="scss">
	.book {
		display: flex;
		flex-direction: column;
		align-items: center;

		.cover {
			width: 100%;
			height: 120px;
			margin-bottom: 5px;
		}

		.title {
			font-size: 13px;
			height: 45px;
			/**适⽤范围：因使⽤了WebKit的CSS扩展属性，该⽅法适⽤于WebKit浏览器及移动端；**/
			display: -webkit-box; //将对象作为弹性伸缩盒⼦模型显⽰
			-webkit-box-orient: vertical; //设置或检索伸缩盒对象的⼦元素的排列⽅式
			-webkit-line-clamp: 2; //⼀个块元素显⽰的⽂本的⾏数
			overflow: hidden; //溢出隐藏
		}
	}



	.book_title {

		height: 30px;
		line-height: 30px;
		font-size: 15px;

		color: #3477A8;

		overflow: hidden; //⽂字溢出隐藏
		text-overflow: ellipsis; //⽂字超出部分⽤省略号代替
		white-space: nowrap; //⽂字不换⾏

		span {
			font-size: 12px;
			color: #A2A2A2
		}
	}

	.book_desc {
		font-size: 12px;
		color: #999
	}
</style>
